<template>
  <div>
    <el-container>
      <el-header style="background-color: white; border: 1px solid #eee">
        <el-button
          icon="el-icon-s-fold"
          style="margin-top: 10px"
          @click="openmemu"
        ></el-button>
        <span style="color: black; margin-left: 10px">员工知识库</span>
      </el-header>
      <el-main>
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span>{{ title }}</span>
          </div>
          <div v-html="repairRichText(this.content)" />
        </el-card>
      </el-main>
    </el-container>

    <knowledge-drawer
      ref="knowledgememu"
      :memulist="memulist"
      @getcontent="getcontent"
    ></knowledge-drawer>
  </div>
</template>

<script>
import KnowledgeDrawer from "./KnowledgeDrawer.vue";
import arrayToTree from "array-to-tree";

export default {
  components: { KnowledgeDrawer },
  created() {
    this.getindexcontent();
    this.getMemu();
  },

  data() {
    return {
      content: "",
      title: "",
      memulist: [],
    };
  },
  methods: {
    

    async getMemu() {
      try {
        let res = await this.$axios.get(`api/knowledge/getmemu`);
        this.memulist = arrayToTree(res.data, {
          parentProperty: "pid",
          customID: "id",
        });
      } catch (e) {}
    },

    async getindexcontent() {
      this.$axios
        .post("api/knowledge/getindexcontent")
        .then((response) => {
          this.content = response.data.content;
          this.title = response.data.title;
          this.$refs.knowledgememu.drawermemu = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    openmemu() {
      this.$refs.knowledgememu.drawermemu = true;
    },

    async getcontent(data) {
      let datas = { kid: data.kid };
      this.$axios
        .post("api/knowledge/getcontent", datas)
        .then((response) => {
          this.content = response.data.content;
          this.title = response.data.title;
          this.$refs.knowledgememu.drawermemu = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    /**
     * 修复富文本图片宽度
     * @description 解决图片宽高超出显示不全问题(让其自适应)
     * @param {String} html - 富文本
     * @return String
     */
    repairRichText(html) {
      // 去掉<img>中style /width / height属性
      let newContent = html.replace(/<img[^>]*>/gi, (match) => {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      // 修改所有style里的width属性为max-width:100%
      newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
        match = match
          .replace(/width:[^;]+;/gi, "max-width:100%;")
          .replace(/width:[^;]+;/gi, "max-width:100%;");
        return match;
      });
      // 去掉所有<br/>标签
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      // img标签添加style属性：max-width:100%;height:auto
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      // return
      return newContent;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>